import { memo, useCallback, useState } from "react";
import { PageContainer } from "@ant-design/pro-components";
import StudentStyle from "./style";
import Header from "./cpms/header";
import StudentContent from "./cpms/content";
import StudentDrawer from "./cpms/drawer";
import { StudentType } from "../../graphql/student";

const Student = memo(() => {
  const [name, setName] = useState<string>("");
  const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
  const [studentData, setStudentData] = useState<StudentType>({
    avatar: "",
    name: "",
    desc: "",
    id: "",
    account: ""
  });
  const changeSearchName = useCallback((value: string) => {
    setName(value);
  }, []);
  return (
    <StudentStyle>
      <PageContainer title="学员管理">
        <div className="studentContent">
          <Header
            changeSearchName={changeSearchName}
            resetClick={() => changeSearchName("")}
          />
          <StudentContent name={name} setDrawerOpen={setDrawerOpen} setStudentData={setStudentData} />
        </div>
      </PageContainer>
      <StudentDrawer  drawerOpen={drawerOpen} studentData={studentData} setDrawerOpen={setDrawerOpen} />
    </StudentStyle>
  );
});

export default Student;
